<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
      overflow: scroll;
      height: 100%;
    "
  >
    <div class="top" style="background-color: #f5f5f5">
      <!-- <div :style="{ height: statusBarHeight + 'px' }" @click="goback"></div> -->

      <div class="wrapper">
        <div class="nav">
          <div style="font-weight: bold" class="navibar">订单状态</div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: center;
              font-size: 12px;
              padding-top: 5px;
              align-items: center;
            "
          >
            剩余支付时间
            <van-count-down
              :time="99000"
              style="padding-left: 5px; font-size: 12px"
            />
          </div>
          <div style="height: 10px; background-color: #f5f5f5"></div>
        </div>
        <!-- <div class="backIcon">
          <div>
            <uni-icons type="back" :size="30" @click="goback"></uni-icons>
          </div>
        </div> -->
      </div>
    </div>
    <div style="flex-grow: 1">
      <div style="height: 50px; background-color: #f5f5f5"></div>

      <div class="card">
        <div class="row" style="align-items: start">
          <div>
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
              style="
                width: 104px;
                height: 99px;
                border-radius: 5px;
                object-fit: cover;
              "
            />
          </div>
          <div style="width: 10px"></div>
          <div
            class="column"
            style="justify-content: start; align-items: start"
          >
            <div style="font-size: 12px; font-weight: bold">
              {{ params.type }}
            </div>
            <TimeReservation></TimeReservation>
            <text style="color: rgba(232, 89, 47, 1); font-size: 18px"
              >18￥</text
            >
            <div class="row">
              <text style="color: rgba(232, 89, 47, 1); font-size: 8px"
                >到手价：￥</text
              ><text
                style="
                  color: rgba(232, 89, 47, 1);
                  font-size: 10px;
                  font-weight: bold;
                "
                >{{ 11 }}</text
              >
            </div>
          </div>
        </div>
      </div>
      <div class="dividerH"></div>
      <OrderContact></OrderContact>
      <div class="dividerH"></div>
      <div class="card">
        <text>订单编号:31281284428482149</text>
        <div style="height: 5px"></div>

        <text>下单时间:2022-12-09 13:59:00</text>
        <div style="height: 5px"></div>

        <text>支付方式:微信</text>
        <div style="height: 5px"></div>

        <text>支付时间:2022-12-09 13:59:30</text>
        <div style="height: 5px"></div>

        <text>配送方式:虚拟商品</text>
      </div>
      <!-- <div style="display: flex; flex-direction: row; justify-content: center">
        <div>
          <div class="blueButton">联系商家</div>
          <div class="blueButton">再来一单</div>

          <div
            class="blueButton"
            style="background-color: rgba(194, 194, 194, 1)"
          >
            取消订单
          </div>
        </div>
      </div> -->

      <!-- <uni-popup ref="csPop" type="center">
        <uni-popup-dialog
          mode="base"
          message="成功消息"
          title="提示"
          content="如遇问题,请您拨打客服电话:010-89482008?"
          :duration="2000"
          :before-close="true"
          @close="close"
          @confirm="confirm"
        ></uni-popup-dialog>
      </uni-popup> -->
      <div style="height: 50px"></div>
      <div style="display: flex; justify-content: center; flex-direction: row">
        <div class="openDoor">
          <div
            class="row"
            style="width: 100%; justify-content: center"
            @click="openDoor"
          >
            <img
              src="@/views/activityPages/assets/door-open.png"
              style="width: 20px; height: 20px"
            />
            <text style="">开门</text>
          </div>
        </div>
        <van-dialog v-model:show="doorOpen">
          <div>
            <!-- 卡片 -->
            <div class="card qrcode">
              <div class="titleText">{{ params.type }}</div>
              <TimeReservation></TimeReservation>
              <div
                style="
                  justify-content: center;
                  align-items: center;
                  display: flex;
                  width: 100%;
                  padding-top: 20px;
                "
              >
                <div>
                  <qrcode-vue :value="'100000000'" :size="100" level="H" />
                </div>
              </div>

              <div class="img-wrap">
                <img src="@/assets/expired.png" style="height: 50px" />
              </div>
            </div>
          </div>
        </van-dialog>
      </div>
      <div style="height: 100px"></div>
    </div>
    <van-sticky :offset-bottom="0" position="bottom">
      <div class="card">
        <div class="row" style="width: 100%">
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              flex-grow: 1;
            "
            @click="showCsDialog"
          >
            <van-icon name="service-o" />

            <text>联系客服</text>
          </div>
          <!-- <div style="flex-grow: 1"></div> -->
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              flex-grow: 1;
            "
            @click="toRefund"
          >
            <van-icon name="refund-o" />

            <text>退订</text>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              flex-grow: 1;
            "
            @click="buyAgain"
          >
            <van-icon name="replay" />
            <text>再来一单</text>
          </div>
        </div>
      </div>
    </van-sticky>

    <van-sticky :offset-bottom="0" position="bottom" style="width: 100%">
      <div class="card shadow" style="width: 100%">
        <div class="row" style="align-items: center; justify-content: end">
          <text style="font-size: 12px">已优惠10￥</text>
          <div style="flex-grow: 1"></div>
          <text>合计：</text>
          <div class="row" style="align-items: center">
            <div v-if="coins > 0" class="row">
              <text class="moneyText" style="font-weight: bold"
                >{{ coins
                }}<text class="moneyText" style="font-size: 10px">积分</text>
              </text>
            </div>
            <img
              v-if="coins > 0 && price > 0"
              src="@/views/activityPages/assets/add5464.png"
              style="width: 12px; height: 12px"
            />
            <text v-if="price > 0" class="moneyText" style="font-weight: bold"
              >{{ price }}￥</text
            >

            <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
              >免费</text
            >
          </div>
          <div style="width: 20px"></div>
          <div class="button" @click="onPay">立即支付</div>
        </div>
      </div>
    </van-sticky>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TimeReservation from '@/views/activityPages/components/time-reservation.vue';
import OrderContact from '@/views/activityPages/components/order-contact.vue';
// import QrCode from '@/components/activity/qr-code.vue';
import QrcodeVue from 'qrcode.vue';

import ReservationType from '@/views/activityPages/const/reservation';
import { useRoute, useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';

const route = useRoute();
const router = useRouter();
const params = route.query;

const coins = ref(100);
const doorOpen = ref(false);
function buyAgain() {
  console.log('buyAgain');
}
function toRefund() {
  router.push({ path: '/scenic/refund/' + route.params.id });
}
function openDoor() {
  doorOpen.value = true;
}
let phone = '010-89482008';
function showCsDialog() {
  showConfirmDialog({
    title: '提示',
    message: '如遇问题,请您拨打客服电话:' + phone,
  })
    .then(() => {
      // on confirm
      window.location.href = 'tel:' + phone;
    })
    .catch(() => {
      // on cancel
    });
}

const price = ref(100);

function onPay() {
  console.log('onPay');
}
</script>

<style scoped lang="scss">
@import url('@/views/activityPages/style/card.css');
.qrcode {
  position: relative;
}
.modal-wrap {
  position: absolute;
}
.img-wrap {
  position: absolute;
  width: 60px;
  height: 30px;
  right: 40px;
  top: 10px;
}
.button {
  width: 116px;
  height: 35px;
  line-height: 20px;
  border-radius: 20px;
  background-color: rgba(236, 106, 45, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blueButton {
  left: 34px;
  top: 687px;
  width: 327px;
  height: 29.34px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(0, 153, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}
.wrapper {
  position: relative;
  width: 100%;
  background-color: #f5f5f5;
}
.backIcon {
  position: absolute;
  z-index: 2;
}
.nav {
  position: absolute;
  z-index: 1;
  width: 100%;
  background-color: #f5f5f5;
}
.navibar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.top {
  position: -webkit-sticky;
  position: sticky;
  top: var(--window-top);
  z-index: 99;
  padding: 10px;
}

.openDoor {
  left: 60.5px;
  top: 673px;
  width: 269px;
  height: 56px;
  line-height: 20px;
  border-radius: 20px;
  background-color: rgba(255, 166, 88, 1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}
</style>
